<template>
  <a-drawer
    title="合并打印"
    placement="right"
    width="100%"
    :closable="true"
    :visible="show"
    :get-container="false"
    @close="onClose"
  >
    <div class="print-box">
      <a-button type="primary" size="small" @click="onPrint"> 打印 </a-button>
    </div>
    <div ref="print" id="print">
      <section
        class="drawer-section"
        v-for="(item, index) in list"
        :key="index"
      >
        <batch-box
          :key="key"
          v-if="item.TableType == 1"
          :item="item"
          :list="item.batchDetailList"
        ></batch-box>
        <polymerize-box
          :key="key"
          v-if="item.TableType == 2 || item.TableType == 3"
          :item="item"
          :list="item.batchDetailList"
          :headerList="item.polyHeaderList"
        ></polymerize-box>
      </section>
    </div>
  </a-drawer>
</template>

<script>
import BatchBox from "./batch-table-box.vue";
import PolymerizeBox from "./polymerize-table-box.vue";
import polymerizeTitle from "@/common/handle-title";
import {
  getJobRecordDetailList,
  getJobRecordDetailGroupList,
} from "@/api/JobRecord";
export default {
  props: ["show", "list"],
  components: {
    BatchBox,
    PolymerizeBox,
  },
  data() {
    return {
      key: 0,
    };
  },
  methods: {
    /* 关闭打印 */
    onClose() {
      this.$emit("updateShow", false);
    },
    /* 打印*/
    onPrint() {
      this.$store.commit("upPrintShow", true);
      this.$print(this.$refs.print);
    },
  },
  watch: {
    list: {
      handler(newValue, oldValue) {
        newValue.map(async (item) => {
          if (item.TableType == 1) {
            let res = await getJobRecordDetailGroupList(item.JobRecordID);
            let list = res.Data.sort((a, b) => {
              return a.JobItemIndex - b.JobItemIndex;
            });
            list.map((item) => {
              item.JobGroup = item.JobGroup.split("。");
              item.JobRecordDetailList = item.JobRecordDetailList.sort(
                (a, b) => {
                  return a.JobItemIndex - b.JobItemIndex;
                }
              );
            });
            item.batchDetailList = list;
            this.key++;
          } else {
            let res = await getJobRecordDetailList(item.JobRecordID);
            let stagingHeader = res.Data.filter(
              (item) => item.JobRecordDetailIndex == 1
            );

            stagingHeader = stagingHeader.sort((a, b) => {
              return a.JobItemIndex - b.JobItemIndex;
            });
            let hList = polymerizeTitle.handleTitleList(stagingHeader);
            /* 先根据 JobRecordDetailIndex 把每一项排序 */
            let stagingBatchDetailList = res.Data.sort((a, b) => {
              return a.JobRecordDetailIndex - b.JobRecordDetailIndex;
            });
            /* 通过 pop方法获取数组最后一位确定共几行 */
            let batchDetailNum =
              stagingBatchDetailList[stagingBatchDetailList.length - 1]
                .JobRecordDetailIndex;
            /* 定义一个空数组 */
            let detailList = [];

            /* 通过遍历获取最大值添加列表中相对应的JobRecordDetailIndex项为一行 push进detailList数组 */
            for (let index = 1; index <= batchDetailNum; index++) {
              let list = stagingBatchDetailList.filter(
                (fitm) => fitm.JobRecordDetailIndex == index
              );
              detailList.push(list);
            }

            /* 遍历结束后将子项排序后赋值 */
            let list = detailList.map((ditm) => {
              ditm.sort((a, b) => {
                return a.JobItemIndex - b.JobItemIndex;
              });
              ditm = polymerizeTitle.handleTitleList(ditm);
              return ditm;
            });
            item.polyHeaderList = hList;
            item.batchDetailList = list;
            this.key++;
          }
        });
      },
      deep: true,
    },
  },
};
</script>

<style lang="less" scoped>
@media print {
  @page {
    margin: 5mm 10mm 15mm 10mm;
    size: A4 landscape;
    color: #000000 !important;
    /* 在底部居中显示页码 */
    @bottom-center {
      content: counter(page) "/" counter(pages);
    }
  }

  tfoot {
    display: table-footer-group;
  }

  .batch-thead {
    display: block !important;
  }

  .thead-box {
    display: block !important;
  }

  /* .header {

    position: fixed;
    top: 0;
    width: 100%;


  } */
  #print {
    .drawer-section {
      page-break-after: always;
    }
  }

  .header,
  .header-space,
  .footer,
  .footer-space {
    display: block !important;
  }
}

.print-box {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.625rem;
}

/deep/.ant-drawer-wrapper-body {
  display: flex;
  flex-direction: column;

  .ant-drawer-body {
    flex: 1;
    padding: 0.625rem;
    overflow-y: auto;

    .drawer-section {
      margin-bottom: 0.625rem;
    }
  }
}
</style>